<script>
import * as XLSX from 'xlsx'
import { loadAdminFaculties, removeAdminFaculties } from '@/api/admin/faculties'
import { ElNotification } from 'element-plus'
import AddDepartDialog from './dialog/AddDepartDialog.vue'
import EditDepartDialog from './dialog/EditDepartDialog.vue'

export default {
  components: {
    AddDepartDialog,
    EditDepartDialog,
  },
  data() {
    return {
      total: 0,
      params: {
        pageNo: 1,
        pageSize: 10,
        query: '',
      },
      list: [],
      showAdd: false,
      showEdit: false,
    }
  },
  methods: {
    async initFacultiesData() {
      const { total, list } = await loadAdminFaculties(this.params)
      this.total = total
      this.list = list
    },
    async deleteFaculty(row) {
      await removeAdminFaculties(row.department_id)
      ElNotification.success({
        title: `“${row.department_name}”删除成功`,
      })
      this.initFacultiesData()
    },
    openEdit(row) {
      // console.log(row)
      // console.log(this.$refs.editDialog)
      // console.log(this.$refs.editDialog.params)
      // 组合式api公开得ref定义得响应式对象，公开后直接返回得就是 value 值
      this.$refs.editDialog.params = {
        department_id: row.department_id,
        department_name: row.department_name,
      }
      this.showEdit = true
    },
    exportToExlsx() {
      let sheetData = []
      for (let row of this.list) {
        sheetData.push({
          编号: row.department_id,
          院系名称: row.department_name,
          专业数量: row.major_count,
          教师数量: row.teacher_count,
        })
      }

      // 基于js数据创建一个表格得sheet
      let sheet = XLSX.utils.json_to_sheet(sheetData)
      // console.log(sheet)
      // 创建一个表格工作簿
      let workBook = XLSX.utils.book_new()
      // 将数据表 sheet 增加到 工作簿，并定义sheet得名字
      XLSX.utils.book_append_sheet(workBook, sheet, '院系列表')
      // 启动下载，完成表格下载，并对文件进行命名
      XLSX.writeFile(workBook, '院系数据.xlsx')
    },
  },
  created() {
    this.initFacultiesData()
  },
}
</script>

<template>
  <el-card>
    <template #header>系管理</template>
    <div class="nav-bar">
      <div class="search">
        <el-input size="small" placeholder="系名" clearable v-model="params.query"></el-input>
        <el-button size="small" type="primary" @click="initFacultiesData">
          <template #icon>
            <el-icon><EpSearch /></el-icon>
          </template>
          <span>查询</span>
        </el-button>
        <el-button size="small" @click="exportToExlsx">
          <template #icon>
            <el-icon><EpSearch /></el-icon>
          </template>
          <span>导出当前数据</span>
        </el-button>
      </div>
      <div>
        <el-button size="small" type="success" @click="showAdd = true" v-auth="['add']">
          <template #icon>
            <el-icon><EpPlus /></el-icon>
          </template>
          <span>添加</span>
        </el-button>
      </div>
    </div>
    <el-table border stripe size="small" :data="list">
      <template #empty>
        <el-empty description="暂无数据" />
      </template>
      <el-table-column label="序号" type="index" width="60"></el-table-column>
      <el-table-column label="系名" prop="department_name"></el-table-column>
      <el-table-column label="专业数" prop="major_count"></el-table-column>
      <el-table-column label="教师数" prop="teacher_count"></el-table-column>
      <el-table-column label="操作" width="120" #default="{ row }" v-auth="['update', 'delete']">
        <el-button type="primary" link @click="openEdit(row)" v-auth="['update']">编辑</el-button>
        <el-popconfirm
          :title="`是否删除“${row.department_name}”系？`"
          @confirm="deleteFaculty(row)"
        >
          <template #reference>
            <el-button type="danger" link v-auth="['delete']">删除</el-button>
          </template>
        </el-popconfirm>
      </el-table-column>
    </el-table>
    <el-pagination
      size="small"
      background
      layout="total, sizes, prev, pager, next, jumper"
      :page-sizes="[5, 10, 20, 30, 40, 50]"
      :total="total"
      v-model:page-size="params.pageSize"
      v-model:current-page="params.pageNo"
      @change="initFacultiesData"
    >
    </el-pagination>
  </el-card>

  <div v-auth="['add']">
    <AddDepartDialog v-model="showAdd" @reset="initFacultiesData"></AddDepartDialog>
  </div>
  <div v-auth="['update']">
    <EditDepartDialog
      ref="editDialog"
      v-model="showEdit"
      @reset="initFacultiesData"
    ></EditDepartDialog>
  </div>
</template>

<style scoped>
.nav-bar {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  margin-bottom: 14px;
}
.nav-bar .el-input {
  width: 180px;
  margin-right: 10px;
}
.el-pagination {
  margin-top: 14px;
  justify-content: center;
}
</style>
